<template>
    <div class="app-container">
      <div class="warp_padding">  
          <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
            <el-radio-button label="top">上</el-radio-button>
            <el-radio-button label="right">右</el-radio-button>
            <el-radio-button label="left">左</el-radio-button>
          </el-radio-group>

          <el-tabs :tab-position="tabPosition"   v-model="activeName" @tab-click="handleClick" style="height:560px;">
            <el-tab-pane label="基本资料"  name="first">
                  <div style="color:#000;font-size:22px;padding: 10px 20px;">基本资料</div>

                  <el-form  :model="form"  :rules="rules" ref="form" label-width="100px" maxlength="20" :label-position="labelPosition">

                    <el-form-item label="账号" prop="userId">
                      
                      <!-- <el-input v-model="form.userId" :disabled="this.isChange ==1" style="width:55%" maxlength="20"></el-input> -->
                      <span>{{userId}}</span>
                      <el-button class='edit' type="primary" v-if="this.isChange !=1 && this.Account !='admin'" @click="editUserId" icon="el-icon-edit" round size="mini">修改</el-button>
                      <el-tooltip class="tooltip" placement="top" effect="light">
                          <div slot="content">
                                <p v-if="this.Account !='admin'">账号只允许修改一次！</p>
                                <p v-if="this.Account =='admin'">超级管理员不允许修改账号！</p>
                          </div>
                          <i class="el-icon-question"></i>
                      </el-tooltip>
                    </el-form-item>

                    <el-form-item label="昵称" prop="userName" >
                      <el-input v-model="form.userName" style="width:55%" maxlength="15" clearable></el-input>
                    </el-form-item>

                    <el-form-item label="性别">
                      <el-radio-group v-model="form.sex" style="width:55%">
                        <el-radio :label="0">男</el-radio>
                        <el-radio :label="1">女</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="手机" v-if='hasMobile' prop="mobile" >
                      <el-input v-model="form.mobile" style="width:55%" maxlength="11" clearable></el-input>
                    </el-form-item>

                    <el-form-item label="身份证号" v-if='hasMobile' prop="cardId" >
                      <el-input v-model="form.cardId" style="width:55%" maxlength="18" clearable></el-input>
                    </el-form-item>


                    <el-form-item label="邮箱" v-if='hasMobile' prop="email">
                      <el-input v-model="form.email" style="width:55%" maxlength="20" clearable></el-input>
                    </el-form-item>
                  

                    <el-form-item label="个人简介" v-if='hasMobile'>
                      <el-input type="textarea" v-model="form.remark" style="width:55%" maxlength="30"  rows="3" show-word-limit clearable></el-input>
                    </el-form-item>

                    
                    <el-form-item>
                      <el-button type="primary" @click="onSave">保存</el-button>
                    </el-form-item>
                  </el-form>  
            </el-tab-pane>
            <el-tab-pane label="安全设置" name="second">
                <SaveS  :mobile="this.hasMobile"/>
            </el-tab-pane>
            
            <el-tab-pane label="我的打卡" name="third"  v-if="this.Account !='admin' && checkPermission(['tea_log'])">
                <Journal ref="Journal"/>
            </el-tab-pane>
            <el-tab-pane label="我的资源" name="fourth" v-if="this.Account !='admin' && checkPermission(['myreslist_select'])">
            </el-tab-pane>
            <!-- <el-tab-pane label="资源预览" name="fourth" v-if="this.Account !='admin' && checkPermission(['mypreview_select'])">资源预览</el-tab-pane> -->
          </el-tabs>
      </div>
      <eForm ref="forms" :is-add="isAdd" />
    </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import { getAccount } from '@/utils/auth' 
import SaveS from './component/saves'
import eForm from './component/form'
import { centerInfo, editInfo } from '@/api/request'
import Journal from './component/journal'
import { validateUserId, validateEmpty,validatePhone, validateIdNo, validateEMail, debounce } from '@/utils/validate'
export default {
  components: { SaveS, eForm,Journal },
  data() {
     const validateuserId = (rule, value, callback) => {
            if (value.trim().length < 1) {
                callback(new Error('用户账号不能为空'))
            } 
            if (!validateUserId(value)) {
                callback(new Error('以字母开头,只能输入数字、字母、下划线'))
            } 
            else {
                callback()
            }
     };
     return{
        Account:getAccount(),
        tabPosition: 'left',
        labelPosition:'right',
        activeName: 'first',
        isChange:'',
        userId:'',
        isAdd:true,
        hasMobile:'',
        form:{
           id:'',
           picurl:'',
           userName:'',
           sex:'',
           mobile:'',
           cardId:'',
           email:'',
           remark:''
        },
        rules: {
          // userId: [
          //     { required: true, message: '请输入账号', trigger: 'blur',validator: validateuserId, },
          //     { min: 4, max: 15, message: '长度在 2 到 20个字符', trigger: 'blur' }
          // ],
          userName: [
              { required: true, message: '请输入昵称', trigger: 'blur', },
              { min: 2, max: 15, message: '长度在 2 到 15个字符', trigger: 'blur' },
              {                       
                  validator: validateEmpty,
                  trigger: 'blur',
              }
          ],
          cardId:[
              { required: true, trigger: 'blur',message: '请输入18位中国大陆地区身份证号',min: 18,max: 18,},
              {                       
                  validator: validateIdNo,
                  trigger: 'blur',
              }
          ],
          mobile:[
                    { required: true, trigger: 'blur',message: '手机号格式错误', },
                    {validator:validatePhone,trigger: 'blur',}
          ],
          email:[
              { required: true, trigger: 'blur',message: '请输入邮箱，长度为4-18位',min: 4,max: 18,},
              {                       
                  validator: validateEMail,
                  trigger: 'blur',
              }
          ],

        }
     }
  },
  // computed : {
  //   formatSex() {
  //      let sex = this.form.sex
  //      return sex == 0 ? '男' : sex == 1 ? '女' : '未知';
  //   }, 
  // },

  methods: {
    checkPermission,
    init(){
      centerInfo().then(res=>{
         let {id,picurl,userId,userName,sex,mobile,cardId, email,remark,isChange} = res.data
         this.form.id = id  
         this.form.picurl = picurl
         this.userId = userId
         this.form.userName = userName
         this.form.sex = sex
         this.hasMobile = mobile
         this.form.mobile = mobile
         this.form.cardId = cardId
         this.form.email = email
         this.form.remark = remark   
         this.isChange = isChange                   
      })
    },
    handleClick(tab, event) {
        console.log(tab.index);
        if (tab.label == '我的资源') {
          this.$router.push({
              path: '/resources/myreslist',
          })
        }
        if (tab.index == 2) {
          this.$refs.Journal.init()
        }
    },
    editUserId(){
      this.$refs.forms.dialog = true
    },
    onSave:debounce(function(){
      this.$refs['form'].validate((valid) => {
          if (valid){
              editInfo(this.form).then(res => { 
                  this.$notify({
                      title: '保存成功',
                      type: 'success',
                      duration: 2500
                  })
                  this.init()
              })
          }else {
              return false
          }
                
      })            
    },500) 

  },
  mounted:function(){
    this.init()
  },
  
}
</script>
<style>
/* .el-tabs__item.is-active{
      background: #f0faff;
} */
</style>

<style scoped lang="scss">
.edit{
  margin:0 0px 0  40px;
}
 .avatar-uploader-icon {
    font-size: 28px;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center
  }

  .avatar {
    width: 120px;
    height: 120px;
    display: block;
    border-radius: 50%
  }
  .user-info {
    padding-left: 0px;
    list-style: none;
    li{
      border-bottom: 1px solid #F0F3F4;
      border-top: 1px solid #F0F3F4;
      padding: 11px 0px;
      font-size: 13px;
    }
    .user-right {
      float: right;

      a{
        color: #317EF3;
      }
    }
  }
</style>
